<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精彩图集</title>
    <link rel="stylesheet" href="/css/computer/index.css">
    <link rel="stylesheet" href="/css/computer/atlas/atlasshow.css">
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="/css/resetcss.css">
    <style>
        
    </style>
</head>

<body>
    <div class="container-box">
        <div class="sidebar-box-left">
            <div class="sidebar">
                <div class="sidebar-header">
                    <a href="#" class="user" id="user-center">个人中心</a>
					<a href="#" class="user" id="user-login">登录/注册</a>
                </div>
                <nav class="sidebar-nav">
                    <ul>
                        <a class="homepage">
                            <li>主页</li>
                        </a><a href="" class="lifemoment">
                            <li>生活瞬间</li>
                        </a><a href="" class="tourlog">
                            <li>旅行记录</li>
                        </a><a href="" class="atlas">
                            <li class="active">精彩图集</li>
                        </a>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="sidebar-box-right">
            <header>
                <div class="header-content">
                    <h1>记录生活中的美好时刻</h1>
                    <p class="subtitle">珍藏每一份感动，分享每一段旅程</p>
                    <a href="#" class="btn" id="submit-addimg">添加图片</a>
                    <a href="#" class="btn" id="submit-deleteimg">删除图片</a>
                    <a href="#" class="btn" id="submit-deleteatlas">删除图集</a>
                </div>
            </header>

            <div class="container">
                <div class="container-show">
                    <h1 id="atladname">
                        <%= json.Atlasname %>
                    </h1>
                    <div class="description" id="atlasdescription">
                        <%= json.Atlasdescription %>
                    </div>
            
                    <div class="gallery" id="gallery">
                        <!-- 图片将通过JavaScript动态添加 -->
                    </div>
                </div>
            
                <!-- 图片预览模态框 -->
                <div class="modal" id="modal">
                    <span class="close-btn" id="closeBtn">&times;</span>
                    <div class="modal-content">
                        <img class="modal-img" id="modalImg" src="" alt="">
                        <div class="caption" id="caption">图片描述</div>
                    </div>
                    <div class="nav-btn prev-btn" id="prevBtn">&#10094;</div>
                    <div class="nav-btn next-btn" id="nextBtn">&#10095;</div>
                </div>
            </div>

            <footer>
                <div class="footer-links">
                    <a href="#">关于我们</a>
                    <a href="#">联系方式</a>
                    <a href="#">隐私政策</a>
                    <a href="#">使用条款</a>
                </div>
                <p class="copyright">© 2023 美好时光记录 版权所有</p>
            </footer>
        </div>
    </div>
</body>


<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="/configfile/config.js"></script>
<script src="/script/token.js"></script>
<script type="module">
    //环境变量初始化
    //获取导航的a标签，并设置href
    const homepageElement = document.querySelector('.homepage'); // 返回第一个匹配的节点
    const lifemomentElement = document.querySelector('.lifemoment'); // 返回第一个匹配的节点
    const atlasElement = document.querySelector('.atlas'); // 返回第一个匹配的节点
    const userCenter = document.querySelector('#user-center');//获取个人中心DOM
	const userLogin = document.querySelector('#user-login');//获取登录注册DOM


	let server_ip = window.__ENV__.SERVER_IP;//服务器ip
	let home_ip = window.__ENV__.HOME_SERVER_IP;//首页ip
	homepageElement.href = home_ip;
	let life_ip = window.__ENV__.LIFEMOMENT_SERVER_IP;//生活瞬间
	lifemomentElement.href = life_ip;
	let atlas_ip = window.__ENV__.ATLAS_SERVER_IP;//图片集
	atlasElement.href = atlas_ip;
	let user_ip = window.__ENV__.USER_SERVER_IP;//用户
	userCenter.href = user_ip;
	userLogin.href = user_ip;

	//获取令牌
	let token = localStorage.getItem("token");

	//获取jwt令牌状态
	let jwtState = getJwtState(token);


	if(jwtState.success){
		userCenter.style.display = "block";
		userLogin.style.display = "none";
	}else{
		userCenter.style.display = "none";
		userLogin.style.display = "block";
	}

    //使用ejs模版来返回数据
    let resultData = <%- JSON.stringify(json) %>;

    
    //图片数据
    const images = [];
    if(resultData.Atlasimgs){
        for(let i=0; i<resultData.Atlasimgs.length; i++){
            let img = {
                src: server_ip + "/" + resultData.Atlasimgs[i].imgurl,
                title: resultData.Atlasimgs[i].imgname
            }
            images.push(img);
        }
    }
    

    const gallery = document.getElementById('gallery');
    const modal = document.getElementById('modal');
    const modalImg = document.getElementById('modalImg');
    const caption = document.getElementById('caption');
    const closeBtn = document.getElementById('closeBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const atlasname = document.getElementById('atlasname');
    const atlasdescription = document.getElementById('atlasdescription');

    let currentIndex = 0;

    // 生成图片画廊
    images.forEach((image, index) => {
        const item = document.createElement('div');
        item.className = 'gallery-item';
        item.innerHTML = `<img src="${image.src}" alt="${image.title}" data-index="${index}">`;
        gallery.appendChild(item);
    });

    // 图片点击事件
    gallery.addEventListener('click', function(e) {
        if (e.target.tagName === 'IMG') {
            currentIndex = parseInt(e.target.getAttribute('data-index'));
            updateModal();
            modal.classList.add('show');
            document.body.style.overflow = 'hidden'; // 防止背景滚动
        }
    });

    // 关闭模态框
    closeBtn.addEventListener('click', function() {
        modal.classList.remove('show');
        document.body.style.overflow = 'auto';
    });

    // 上一张
    prevBtn.addEventListener('click', function() {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        updateModal();
    });

    // 下一张
    nextBtn.addEventListener('click', function() {
        currentIndex = (currentIndex + 1) % images.length;
        updateModal();
    });

    // 键盘导航
    document.addEventListener('keydown', function(e) {
        if (modal.classList.contains('show')) {
            if (e.key === 'ArrowLeft') {
                currentIndex = (currentIndex - 1 + images.length) % images.length;
                updateModal();
            } else if (e.key === 'ArrowRight') {
                currentIndex = (currentIndex + 1) % images.length;
                updateModal();
            } else if (e.key === 'Escape') {
                modal.classList.remove('show');
                document.body.style.overflow = 'auto';
            }
        }
    });

    // 更新模态框内容
    function updateModal() {
        const image = images[currentIndex];
        modalImg.src = image.src;
        modalImg.alt = image.title;
        caption.textContent = image.title;
    }

    // 点击模态框背景关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.remove('show');
            document.body.style.overflow = 'auto';
        }
    });

    (function (){
        let submitaddimg = document.getElementById("submit-addimg");
        let submitdeleteimg = document.getElementById("submit-deleteimg");
        let submitdeleteatlas = document.getElementById("submit-deleteatlas");
        
        //删除图片
        submitdeleteimg.addEventListener("click", ()=>{
            axios
                .post(
                    atlas_ip + "/gettempcode",
                    {},
                    {
                        headers: {
                            "Authorization": `Bearer ${token}`
                        }
                    }
                )
                .then((res) => {
                    //判断后端的报错信息。如果存在则保存失败
                    // console.log(res.data);
                    let tempToken = res.data.tempToken;
                    //跳转新页面
                    let href = `${atlas_ip}/deleteimg${resultData.Atlas_id}`;
                    window.location.href = `${href}?tempToken=${tempToken}`;
                })
                .catch(err => {
                    console.log(err);
                    alert("拒绝访问");
                });
        });
        //添加图片
        submitaddimg.addEventListener("click", ()=>{
            axios
                .post(
                    atlas_ip + "/gettempcode",
                    {},
                    {
                        headers: {
                            "Authorization": `Bearer ${token}`
                        }
                    }
                )
                .then((res) => {
                    //判断后端的报错信息。如果存在则保存失败
                    // console.log(res.data);
                    let tempToken = res.data.tempToken;
                    //跳转新页面
                    let href = `${atlas_ip}/addimg${resultData.Atlas_id}`;
                    window.location.href = `${href}?tempToken=${tempToken}`;
                })
                .catch(err => {
                    console.log(err);
                    alert("拒绝访问");
                });
        });
        //删除图集
        submitdeleteatlas.addEventListener("click", ()=>{
            let deleteData = {
                Atlas_id: resultData.Atlas_id
            }
            axios
                .post(
                    atlas_ip + "/deleteatlas",
                    deleteData,
                    {
                        headers: {
                            "Authorization": `Bearer ${token}`
                        }
                    }
                )
                .then((res) => {
                    //判断后端的报错信息。如果存在则保存失败
                    // console.log(res.data);
                    if(res.data.message.success){
                        alert("删除成功");
                        window.location.href = atlas_ip
                    }else{
                        alert("删除失败");
                    }
                })
                .catch(err => {
                    console.log(err);
                    alert("拒绝访问");
                });
        });

    })();



</script>



</html>